<template>
    <div class="block">
        <el-table :data="comtableData" show-header>
            <el-table-column prop="name" label="用户名">
            </el-table-column>
            <el-table-column prop="password" label="密码">
            </el-table-column>
            <el-table-column prop="loginTime" label="最后一次登录时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="small" type="danger" @click="handleEdit(scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog label="编辑招聘信息" :visible.sync="eddialogVisible">
            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="70px">
                <el-form-item label="用户名" prop="name">
                    <el-input style="width: 400px;" v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input style="width: 400px;" type="textarea" v-model="editForm.password"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="eddialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>


            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: 'App',
    inject: ['reload'],
    data() {
        return {
            dateRange: ['', ''],
            beginTime: "",
            endTime: "",
            selectedOption: '',
            comtableData: [],
            date: '',
            dialogVisible: false,
            eddialogVisible: false,
            deleteTask: false,
            form: {
                name: '',
                password: '',
            },
            headers: {
                'token': localStorage.getItem('token')
            },
            editForm: {},
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
            }

        }

    },
    created() {
        this.loadData();
        this.headers['token'] = `Bearer ${this.$getToken()}`;
    },
    methods: {
        loadData() {
            axios.get(`api/admin/page`).then((res) => {
                const convertedList = res.data
                this.comtableData = convertedList
                this.total = res.data.total
            }).catch((error) => {
                console.error(error);
                this.$message.error('网络错误')
            });
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(() => {
                    done();
                })
                .catch(() => { });
        },
        cancelDelete() {
            this.deleteTask = false;
        },
        handleEdit(row) {
            this.editForm = { ...row }; // 创建编辑表单的数据副本
            this.eddialogVisible = true; // 显示对话框
        },
        saveEdit() {
            // 检查 title 字段是否为空
            if (!this.editForm.name) {
                this.$message.error('名字不能为空');
                return;
            }
            // 检查 title 字段是否为空
            if (!this.editForm.password) {
                this.$message.error('密码不能为空');
                return;
            }
            axios.put(`api/admin/update`, this.editForm).then((res) => {
                if (res.status == '200') {
                    this.eddialogVisible = false; // 关闭对话框
                    this.$message.success('修改信息成功')
                    this.reload()
                } else {
                    this.$message.success('修改信息失败，请联系开发者')
                    return false
                }
            });
        },
    }
}
</script>

<style>
.button {
    font-family: PingFangSC-Medium;
    width: 90px;
    height: 50px;
    background: #f27657;
    border-radius: 20px;
}

.button1 {
    font-family: PingFangSC-Medium;
    width: 90px;
    height: 50px;
    background: #f3a895;
    border-radius: 20px;
}

.button:hover {
    background: #F16440;
    border: 0;
}
</style>